<script setup lang="ts">
import type { Activity } from '@/types/activity'
import { ref } from 'vue'

// 定义组件属性
const props = defineProps<{
  list: Activity[]
}>()

// 轮播图当前索引
const current = ref(0)
const swiperChange = (e: any) => {
  current.value = e.detail.current
}

const handleSwiperClick = (activityId: number | undefined) => {
  uni.navigateTo({
    url: `/pagesActivity/activity-detail/activity-detail?id=${activityId}`,
  })
}
</script>
<template>
  <!-- 轮播图区域 -->
  <view class="swiper-section">
    <swiper
      class="swiper"
      circular
      :indicator-dots="false"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      @change="swiperChange"
    >
      <swiper-item
        v-for="item in list"
        :key="item.activityId"
        @click="handleSwiperClick(item.activityId)"
        class="swiper-item"
      >
        <image class="swiper-image" :src="item.coverImage" mode="aspectFill"></image>
        <view class="swiper-title">{{ item.title }}</view>
      </swiper-item>
    </swiper>

    <!-- 自定义指示器 -->
    <view class="swiper-indicator">
      <view
        v-for="(item, index) in list"
        :key="index"
        class="indicator-dot"
        :class="{ active: current === index }"
      >
      </view>
    </view>
  </view>
</template>

<style lang="scss">
// 轮播图样式
.swiper-section {
  position: relative;
  width: 100%;
  height: 360rpx;
  margin-top: 20rpx;

  .swiper {
    width: 100%;
    height: 100%;

    .swiper-item {
      position: relative;

      .swiper-image {
        width: 100%;
        height: 100%;
      }

      .swiper-title {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
        color: #fff;
        padding: 20rpx 30rpx;
        font-size: 28rpx;
        font-weight: bold;
      }
    }
  }

  .swiper-indicator {
    position: absolute;
    bottom: 20rpx;
    right: 30rpx;
    display: flex;

    .indicator-dot {
      width: 12rpx;
      height: 12rpx;
      border-radius: 6rpx;
      background-color: rgba(255, 255, 255, 0.6);
      margin: 0 6rpx;
      transition: all 0.3s;

      &.active {
        width: 30rpx;
        background-color: #2b85e4;
      }
    }
  }
}
</style>
